<template>
  <div>
    <!-- <div class="area-header">
      <span class="area-header-title">显示条件</span>
    </div> -->
    <el-table :data="domains" tooltip-effect="dark" :show-header="false">

      <el-table-column label="字段" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.eField" placeholder="字段" />
        </template>
      </el-table-column>
      <el-table-column label="判断" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.eOper" placeholder="判断">
            <el-option v-for="item,index in operationOption" :key="index" :label="item.title" :value="item.value" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="条件" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.eCondi" placeholder="条件" />
        </template>
      </el-table-column>
      <el-table-column label="#" align="left" width="100">
        <template slot-scope="scope">
          <el-button size="mini" circle icon="el-icon-plus" @click="addHandle(scope.$index)" />
          <el-button v-show="scope.$index==0" size="mini" type="danger" plain circle icon="el-icon-refresh-right" @click="clear(scope.$index)" />
          <el-button v-show="scope.$index>=1" type="danger" plain size="mini" circle icon="el-icon-minus" @click="minusHandle(scope.$index)" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

const operationOption = [{
    title: '=',
    value: '=='
  },
  {
    title: '>',
    value: '>'
  },
  {
    title: '<',
    value: '<'
  },
  {
    title: '<=',
    value: '>='
  },
  {
    title: '>=',
    value: '>='
  },
  {
    title: '!=',
    value: '!='
  }
]
export default {
  name: 'SubCondition',
  props: {
    domains: {
      type: Array,
      default: () => [{}]
    }
  },
  data() {
    return {
      display: true,
      formOpen: false,
      title: undefined,
      operationOption: operationOption
    }
  },
  computed: {
    guid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0
        var v = c === 'x' ? r : (r & 0x3 | 0x8)
        return v.toString(16)
      })
    }
  },
  watch: {

  },
  created() {
  },
  methods: {
    addHandle(index) {
      const obj = {
        field: undefined,
        oper: undefined,
        condi: undefined
      }
      if (index === 0) {
        this.domains.push(obj)
      } else {
        this.domains.splice(index, 0, obj)
      }
    },
    minusHandle(index) {
      this.domains.splice(index, 1)
    },
    evil(fn) {
      const Fn = Function
      return new Fn('return ' + fn)()
    },
    clear() {
       this.domains = [{}]
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table {
  color: transparent;

  thead {
    font-weight: initial;
  }
}

::v-deep .el-table::before {
  background-color: transparent;
}

::v-deep .el-table th,
.el-table tr {
  background: transparent;
  border: none;
}

::v-deep .el-table td,
.el-table th.is-leaf {
  border: none;
}

::v-deep .el-table th>.cell {
  color: transparent
}

::v-deep .el-table td,
.el-table th.is-leaf {
  border: none;
}

::v-deep .el-table td,
::v-deep .el-table th.is-leaf {
  border-bottom: none;
}

::v-deep .el-table--enable-row-transition .el-table__body td {
  background: transparent;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped {
  td {
    background: transparent;
  }
}

::v-deep .el-table td,
.el-table th.is-leaf {
  border: none;
}

::v-deep .el-table__fixed-right::before,
::v-deep .el-table__fixed::before {
  background-color: transparent;
}
</style>
